<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>编辑用户</title>
		<!-- Bootstrap -->
		<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.min.css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" href="lib/Validform_v5.3.2/css/style.css">
		<!-- <link rel="stylesheet" type="text/css" href="lib/Validform_v5.3.2/css/style.css"/> -->
		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<!-- header -->
		<header></header>
		<div class="main">
			<div class="left-side"></div>
			<div class="right-content">
				<div class="panel panel-primary">
					<div class="panel-heading">用户详情</div>
					<div class="panel-body">
						<form class="form form-horizontal" method="post" action="/admin/info" id="form">
							<input name="id" type="hidden" />
							<div class="form-group">
								<label class="col-sm-2 control-label">
									用户名:
									<span class="text-danger">*</span>
								</label>
								<div class="col-sm-10">
									<input type="text" name="username" datatype="s3-20" errormsg="用户名至少3个字符,最多20个字符！" class="form-control"
									 readonly>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">
									姓名:
									<span class="text-danger">*</span>
								</label>
								<div class="col-sm-10">
									<input type="text" name="fullname" class="form-control" datatype="s2-20" errormsg="姓名至少2个字符,最多20个字符！">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">
									性别:
									<span class="text-danger">*</span>
								</label>
								<div class="col-sm-10">
									<label class="radio-inline">
										<input type="radio" name="sex" value="男"> 男
									</label>
									<label class="radio-inline">
										<input type="radio" name="sex" value="女" datatype="*"> 女
									</label>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">
									手机:
									<span class="text-danger">*</span>
								</label>
								<div class="col-sm-10">
									<input type="text" name="tel" class="form-control" datatype="m" errormsg="请输入正确的手机号码！">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">
									邮箱:
									<span class="text-danger">*</span>
								</label>
								<div class="col-sm-10">
									<input type="text" name="email" class="form-control" datatype="e" errormsg="请输入正确的邮箱！">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">
									头像:
									<span class="text-danger">*</span>
								</label>
								<div class="col-sm-10">
									<div class="upload-box uploaded text-center">
										<div class="plus">
											<span class="glyphicon glyphicon-plus"></span>
											<input class="file" type="file">
										</div>
										<img src="img/1.jpg" alt="">
										<div class="cover">
											<span class="glyphicon glyphicon-trash delete"></span>
										</div>
									</div>
									<input name="avatar" type="hidden" datatype="*" nullmsg="请上传头像！" />
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<button type="submit" id="saveBtn" class="btn btn-primary">保存修改</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="lib/jQuery/jquery-1.12.4.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="lib/bootstrap/js/bootstrap.min.js"></script>
		<script src="lib/Validform_v5.3.2/Validform_v5.3.2_min.js"></script>
		<script src="lib/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/load.js"></script>
		<script type="text/javascript">
			$('.upload-box .delete').click(function() {
				var src = $(this).parent().siblings('img').attr('src');
				console.log(src);
				var i = src.indexOf('default');
				if (i >= 0) {
					$('.upload-box').removeClass('uploaded');
					return;
				}
				//物理删除图片
				src = src.replace(/.*\/images/, './images');
				// console.log(src);
				$.post('/upload/delete', {
					src: src
				}, function(res) {
					if(res.status){
						layer.msg(res.msg);
						$('.upload-box').removeClass('uploaded');
					}else{
						layer.msg(res.msg);
					}
				})
			});
		</script>
		<script type="text/javascript">
			$('.file').change(function(e) {
				var oFile = e.target.files[0];
				//上传图片文件
				var formData = new FormData();
				formData.append('file', oFile);
				formData.append('type', 'avatar');
				$.ajax({
					type: "post",
					url: "/upload/common/",
					data: formData,
					contentType: false,
					processData: false,
					success: function(res) {
						if (res.status) {
							//成功
							layer.msg(res.msg);
							$('.upload-box img').attr('src', res.data);
							$('.upload-box').addClass("uploaded")
						} else {
							//失败
							layer.msg(res.msg);
						}
					}
				})
			});
		</script>
		<script type="text/javascript">
			//获取地址栏参数
			var id = GetRequest().id;
			// console.log('id', id);
			//获取个人资料
			$.getJSON('/admin/info', {
				id: id
			}, function(res) {
				var person = res.data;
				$('.upload-box img').attr('src', person.avatar);

				var username = person.username;
				$('input[name=username]').val(username);

				var fullname = person.fullname;
				$('input[name=fullname]').val(fullname);

				$('input[name=sex]').each(function() {
					if ($(this).val() == person.sex) {
						$(this).prop("checked", true);
					}
				})

				var tel = person.tel;
				$('input[name=tel]').val(tel);

				var email = person.email;
				$('input[name=email]').val(email);
			})
		</script>

		<script type="text/javascript">
			$('#form').Validform({
				tiptype: 4,
				callback: function(res) {
					if(res.status == false){
						layer.msg(res.msg);
					}
				}
			});
		</script>
	</body>

</html>
